<template>
  <s-layout :title="state.model.id ? $t('pages.addressList.edit_address') : $t('pages.addressList.add_address')">
    <uni-forms
      ref="addressFormRef"
      v-model="state.model"
      :rules="state.rules"
      validateTrigger="bind"
      labelWidth="160"
      labelAlign="left"
      border
      :labelStyle="{ fontWeight: 'bold' }"
    >
      <view class="bg-white form-box ss-p-x-30">
        <uni-forms-item name="consignee" :label=" $t('pages.addressList.shouhuoren')" class="form-item">
          <uni-easyinput
            v-model="state.model.consignee"
            :placeholder="$t('pages.addressList.shouhuoren')"
            :inputBorder="false"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
          />
        </uni-forms-item>
		

        <uni-forms-item name="mobile" :label="$t('pages.addressList.phone')" class="form-item">
          <uni-easyinput
            v-model="state.model.mobile"
            type="number"
            :placeholder="$t('pages.addressList.shuru')+$t('pages.addressList.phone')"
            :inputBorder="false"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
          >
          </uni-easyinput>
        </uni-forms-item>
		
		<uni-forms-item name="nation" :label="$t('pages.addressList.guojia')" class="form-item" @tap="state.showNation = true">
		  <uni-easyinput
		    v-model="state.model.nation"
		    disabled
		    :inputBorder="false"
		    :styles="{ disableColor: '#fff', color: '#333' }"
		    placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
		    :placeholder="$t('pages.addressList.shuru')+$t('pages.addressList.guojia')"
		  >
		    <template v-slot:right>
		      <uni-icons type="right"></uni-icons>
		    </template>
		  </uni-easyinput>
		</uni-forms-item>
		
		<uni-forms-item name="province_name" :label="$t('pages.addressList.sheng')" class="form-item">
		  <uni-easyinput
		    v-model="state.model.province_name"
		    :placeholder="$t('pages.addressList.shuru')+$t('pages.addressList.sheng')"
		    :inputBorder="false"
		    placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
		  />
		</uni-forms-item>
		
		<uni-forms-item name="city_name" :label="$t('pages.addressList.shi')" class="form-item">
		  <uni-easyinput
		    v-model="state.model.city_name"
		    :placeholder="$t('pages.addressList.shuru')+$t('pages.addressList.shi')"
		    :inputBorder="false"
		    placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
		  />
		</uni-forms-item>
		
		<uni-forms-item name="district_name" :label="$t('pages.addressList.qu')" class="form-item">
		  <uni-easyinput
		    v-model="state.model.district_name"
		    :placeholder="$t('pages.addressList.shuru')+$t('pages.addressList.qu')"
		    :inputBorder="false"
		    placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
		  />
		</uni-forms-item>
		
        <!-- <uni-forms-item
          name="region"
          label="省市区"
          @tap="state.showRegion = true"
          class="form-item"
        >
          <uni-easyinput
            v-model="state.model.region"
            disabled
            :inputBorder="false"
            :styles="{ disableColor: '#fff', color: '#333' }"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
            placeholder="请选择省市区"
          >
            <template v-slot:right>
              <uni-icons type="right"></uni-icons>
            </template>
          </uni-easyinput>
        </uni-forms-item> -->
		
        <uni-forms-item
          name="address"
          :label="$t('pages.addressList.address')"
          :formItemStyle="{ alignItems: 'flex-start' }"
          :labelStyle="{ lineHeight: '5em' }"
          class="textarea-item"
        >
          <uni-easyinput
            :inputBorder="false"
            type="textarea"
            v-model="state.model.address"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
            :placeholder="$t('pages.addressList.shuru')+$t('pages.addressList.address')"
            clearable
          ></uni-easyinput>
        </uni-forms-item>
      </view>

      <view class="ss-m-y-20 bg-white ss-p-x-30 ss-flex ss-row-between ss-col-center default-box">
        <view class="default-box-title"> {{$t('pages.addressList.morendiz')}} </view>
        <su-switch style="transform: scale(0.8)" v-model="state.model.is_default"></su-switch>
      </view>
    </uni-forms>
    <su-fixed bottom :opacity="false" bg="" placeholder :noFixed="false" :index="10">
      <view class="footer-box ss-flex-col ss-row-between ss-p-20">
        <view class="ss-m-b-20"
          ><button class="ss-reset-button save-btn ui-Shadow-Main" @tap="onSave">{{$t('pages.addressList.baocun')}}</button></view
        >
        <button v-if="state.model.id" class="ss-reset-button cancel-btn" @tap="onDelete">
          {{$t('buttonText.delete')}}
        </button>
      </view>
    </su-fixed>
    <!-- 省市区弹窗 -->
    <su-region-picker
      :show="state.showRegion"
      @cancel="state.showRegion = false"
      @confirm="onRegionConfirm"
    >
    </su-region-picker>
	
	<su-nation-picker
		:show="state.showNation"
		@cancel="state.showNation = false"
		@confirm="onNationConfirm"
	></su-nation-picker>
	
  </s-layout>
</template>

<script setup>
  import { computed, watch, ref, reactive, unref } from 'vue';
  import sheep from '@/sheep';
  import { onLoad, onPageScroll } from '@dcloudio/uni-app';
  import _ from 'lodash';
  import { consignee, mobile, address, region } from '@/sheep/validate/form';
import { useI18n } from 'vue-i18n'
  const { t }  = useI18n()
  const addressFormRef = ref(null);
  const state = reactive({
    showRegion: false,
    showNation: false,
    model: {
      consignee: '',
      mobile: '',
      address: '',
      is_default: false,
      region: '',
    },
    rules: {
      consignee,
      mobile,
      address,
      region,
    },
  });
  watch(
    // () => state.model.province_name,
    // (newValue) => {
    //   if (newValue) {
    //     state.model.region = `${state.model.province_name}-${state.model.city_name}-${state.model.district_name}`;
    //   }
    // },
    // {
    //   deep: true,
    // },
  );
  const onRegionConfirm = (e) => {
    state.model = {
      ...state.model,
      ...e,
    };
    state.showNation = false;
  };
  const onNationConfirm = (e) => {
	  state.model = {
	    ...state.model,
	    ...e,
	  };
	  state.showNation = false;
  }
  const getAreaData = () => {
    if (_.isEmpty(uni.getStorageSync('areaData'))) {
      sheep.$api.data.area().then((res) => {
        if (res.code === 1) {
          uni.setStorageSync('areaData', res.data);
        }
      });
    }
  };
  const onSave = async () => {
    const validate = await unref(addressFormRef)
      .validate()
      .catch((error) => {
        console.log('error: ', error);
      });
    if (!validate) return;
	state.model.region = `${state.model.province_name}-${state.model.city_name}-${state.model.district_name}`;
    let res = null;
    if (state.model.id) {
      res = await sheep.$api.user.address.update(state.model.id, state.model);
    } else {
      res = await sheep.$api.user.address.create(state.model);
    }
    if (res.code === 1) {
      sheep.$router.back();
    }
  };

  const onDelete = () => {
    uni.showModal({
      title: t('pages.goods.order.tishi'),
      content: t('buttonText.delete'),
      success: async function (res) {
        if (res.confirm) {
          const { code } = await sheep.$api.user.address.delete(state.model.id);
          if (res.code === 1) {
            sheep.$router.back();
          }
        }
      },
    });
  };
  onLoad(async (options) => {
    getAreaData();
    if (options.id) {
      let res = await sheep.$api.user.address.detail(options.id);
      if (res.code === 1) {
        state.model = {
          ...state.model,
          ...res.data,
        };
      }
    }

    if (options.data) {
      let data = JSON.parse(options.data);
      state.model = {
        ...state.model,
        ...data,
      };
    }
  });
</script>

<style lang="scss" scoped>
  :deep() {
    .uni-forms-item__label .label-text {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
    }

    .uni-easyinput__content-input {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
      padding-left: 0 !important;
    }

    .uni-easyinput__content-textarea {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
      margin-top: 8rpx !important;
    }

    .uni-icons {
      font-size: 40rpx !important;
    }

    .is-textarea-icon {
      margin-top: 22rpx;
    }

    .is-disabled {
      color: #333333;
    }
  }

  .default-box {
    width: 100%;
    box-sizing: border-box;
    height: 100rpx;

    .default-box-title {
      font-size: 28rpx;
      color: #333333;
      line-height: normal;
    }
  }

  .footer-box {
    .save-btn {
      width: 710rpx;
      height: 80rpx;
      border-radius: 40rpx;
      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
      color: $white;
    }

    .cancel-btn {
      width: 710rpx;
      height: 80rpx;
      border-radius: 40rpx;
      background: var(--ui-BG);
    }
  }
</style>
